<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/index.css" />
		<link href="https://cdn.bootcdn.net/ajax/libs/fullPage.js/2.9.0/jquery.fullPage.min.css" rel="stylesheet">
		<link href="https://cdn.bootcdn.net/ajax/libs/Swiper/5.4.4/css/swiper.min.css" rel="stylesheet">
	</head>
	<body>
		<div class="all">
			<div class="all-top">
				<div class="all-top-sub all-show">
					<a href="#page1" class="home all-active"></a>
					<a href="#page2" class="order"></a>
					<a href="#page3" class="world"></a>
					<a href="#page4" class="role"></a>
					<a href="#page5" class="news"></a>
					<a href="#page6" class="item"></a>
					<a href="#page7" class="enjoy"></a>
				</div>
			</div>
			
			<div class="fullpage main">
				<div class="section main-one ">
					<video class="video" loop="loop" muted="muted" autoplay="autoplay">
						<source src="https://static.biligame.com/zysy/gw/pc/video/bgVideo.mp4?1f1173d9" type="audio/mp4">
						</source>
					</video>
					<div class="main-one-bf">
						<div class="main-one-bf-out"></div>
						<div class="main-one-bf-in"></div>
					</div>
					<div class="main-one-sy"></div>
					<div class="main-one-game"></div>
					<p class="main-one-num">已有288615人加入冒险</p>
				</div>
				<div class="section main-two">
					<div class="main-two-title"></div>
					<div class="main-two-mid">
						<div class="main-two-mid-1"><i></i></div>
						<div class="main-two-mid-2"><i></i></div>
						<div class="main-two-mid-3"><i></i></div>
						<div class="main-two-mid-4"><i></i></div>
						<div class="main-two-mid-5"></div>
						<div class="main-two-mid-6"></div>
						<div class="main-two-mid-7"></div>
					</div>
					<div class="main-two-bot">
						<span>领取规则</span>
						<span class="main-two-bot-mid">|</span>
						<span>奖励说明</span>
					</div>
				</div>
				<div class="section main-three">
					<i></i>
				</div>
				<div class="section main-four">
					<div class="main-four-bg"></div>
					<div class="swiper-container" id="character">
						<div class="swiper-wrapper content">
							<div class="swiper-slide items character-fi character-active"></div>
							<div class="swiper-slide items character-se"></div>
							<div class="swiper-slide items character-th"></div>
							<div class="swiper-slide items character-four"></div>
							<div class="swiper-slide items character-six"></div>
							<div class="swiper-slide items character-fif"></div>
							<div class="swiper-slide items character-seven"></div>
						</div>
					</div>
					<div class="swiper-pagination main-four-fyq"></div>
					<div class="swiper-button-prev my-button-disabled"></div>
					<div class="swiper-button-next my-button-hidden"></div>
				</div>
				<div class="section main-five">
					<div class="main-five-bg"></div>
					<div class="main-five-reward">
						<div class="main-five-show swiper-container">
							<div class="main-five-text swiper-wrapper">
								<div class="swiper-slide main-five-pic1"></div>
								<div class="swiper-slide main-five-pic2"></div>
							</div>
							<div class="main-five-fyq swiper-pagination"></div>
						</div>
						<div class="main-five-list">
							<div class="main-five-up">
								<div class="main-five-item main-five-fi block">最新</div>
								<div class="main-five-item">新闻</div>
								<div class="main-five-item">活动</div>
								<div class="main-five-item">公告</div>
								<div class="main-five-item">攻略</div>
							</div>
							<div class="main-five-down">
								<div class="main-five-zx main-five-have">
									<div class="main-five-zxfi">
										<p class="zxfi-fi">燃魂激斗RPG《终焉誓约》安卓不限号计费删档测试开启！</p>
										<p class="zxfi-se">2020-07-16</p>
									</div>
									<div class="main-five-zxfi">
										<p class="zxfi-fi">《终焉誓约》起誓测试开启公告</p>
										<p class="zxfi-se">2020-07-09</p>
									</div>
									<div class="main-five-zxfi">
										<p class="zxfi-fi">《终焉誓约》起誓测试FAQ</p>
										<p class="zxfi-se">2020-07-09</p>
									</div>
								</div>
								<div class="main-five-zx">
									<div class="main-five-zxfi">
										<p class="zxfi-fi">燃魂激斗RPG《终焉誓约》安卓不限号计费删档测试开启！</p>
										<p class="zxfi-se">2020-07-16</p>
									</div>
								</div>
								<div class="main-five-zx">
									<div class="main-five-zxfi">
										<p class="zxfi-fi">《终焉誓约》起誓测试充值返利公告</p>
										<p class="zxfi-se">2020-07-16</p>
									</div>
								</div>
								<div class="main-five-zx">
									<div class="main-five-zxfi">
										<p class="zxfi-fi">《终焉誓约》起誓测试开启公告</p>
										<p class="zxfi-se">2020-07-09</p>
									</div>
									<div class="main-five-zxfi">
										<p class="zxfi-fi">《终焉誓约》起誓测试FAQ</p>
										<p class="zxfi-se">2020-07-09</p>
									</div>
									<div class="main-five-zxfi">
										<p class="zxfi-fi">首次精英测试iOS端测试说明及TestFlight使用方式</p>
										<p class="zxfi-se">2020-07-09</p>
									</div>
								</div>
								<div class="main-five-zx">
									<div class="main-five-zxfi">
										<p class="zxfi-fi">--暂无信息--</p>
									</div>
								</div>
								<div class="main-five-bot">
									<div class="main-five-info">
										了解更多
										<br>
										情报资讯
									</div>
									<i></i>
									<em></em>
									<i></i>
									<em></em>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="section main-six">
					<div class="main-six-bg"></div>
					<div class="swiper-container main-six-lb">
						<div class="swiper-wrapper">
							<div class="swiper-slide main-six-fi"></div>
							<div class="swiper-slide main-six-se"></div>
							<div class="swiper-slide main-six-th"></div>
							<div class="swiper-slide main-six-fourth"></div>
							<div class="swiper-slide main-six-fifth"></div>
							<div class="swiper-slide main-six-sixth"></div>
						</div>
					</div>
					<div class="six-dw">
						<div class="swiper-pagination main-six-fyq"></div>
					</div>
					<div class="swiper-button-prev " id="main-six-le"></div>
					<div class="swiper-button-next " id="main-six-ri"></div>
				</div>
				<div class="section main-seven main-seven">
					<div class="main-seven-bg"></div>
					<div class="swiper-container main-seven-lb" id="page-fyq">
						<div class="swiper-wrapper">
							<div class="swiper-slide main-seven-page1"></div>
							<div class="swiper-slide main-seven-page2"></div>
							<div class="swiper-slide main-seven-page3"></div>
							<div class="swiper-slide main-seven-page4"></div>
							<div class="swiper-slide main-seven-page5"></div>
							<div class="swiper-slide main-seven-page6"></div>
							<div class="swiper-slide main-seven-page7"></div>
							<div class="swiper-slide main-seven-page8"></div>
							<div class="swiper-slide main-seven-page9"></div>
							<div class="swiper-slide main-seven-page10"></div>
							<div class="swiper-slide main-seven-page11"></div>
							<div class="swiper-slide main-seven-page12"></div>
							<div class="swiper-slide main-seven-page13"></div>
							<div class="swiper-slide main-seven-page14"></div>
							<div class="swiper-slide main-seven-page15"></div>
						</div>
					</div>
					<div class="dw">
						<div class="swiper-pagination main-seven-fyq"></div>
					</div>
					<div class="swiper-button-prev"></div>
					<div class="swiper-button-next"></div>
				</div>
			</div>
			<div class="skill">
				<div class="swiper-container skill-lb">
					<div class="swiper-wrapper skill-txt">
						<div class="swiper-slide skill-lb-fi avtive">
							<div class="skill-fi-gif"></div>
						</div>
						<div class="swiper-slide skill-lb-se">
							<div class="skill-se-gif"></div>
						</div>
						<div class="swiper-slide skill-lb-th">
							<div class="skill-th-gif"></div>
						</div>
						<div class="swiper-slide skill-lb-fourth">
							<div class="skill-fourt-gif"></div>
						</div>
						<div class="swiper-slide skill-lb-fifth">
							<div class="skill-fifth-gif"></div>
						</div>
						<div class="swiper-slide skill-lb-sixth">
							<div class="skill-sixth-gif"></div>
						</div>
						<div class="swiper-slide skill-lb-seventh">
							<div class="skill-seventh-gif"></div>
						</div>
					</div>
					<div class="swiper-button-prev skill-le"></div>
					<div class="swiper-button-next skill-ri"></div>
					<div class="close"></div>
				</div>
			</div>
		</div>






		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/Swiper/5.4.4/js/swiper.min.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/fullPage.js/2.9.0/jquery.fullPage.min.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/fullPage.js/2.9.0/vendors/jquery.easings.min.js"></script>

		<script type="text/javascript">
			var close = document.querySelector('.close')
			var skill = document.querySelector('.skill')
			var items = document.querySelectorAll('.items')
			var txt = document.querySelectorAll('.skill-txt>div')
			var video = document.querySelector('.video')
			
			
			
			for (var i = 0; i < items.length; i++) {
				items[i].onclick = function() {
					skill.style.display = 'block'
				}
			}
			
			close.onclick = function() {
				skill.style.display = 'none'
			}
			
			$(document).ready(function() {
				$('.main').fullpage({
					animateAnchor: true,
					menu: true,
					anchors: ['page1', 'page2', 'page3', 'page4', 'page5', 'page6', 'page7'],
					onLeave: function(index, nextIndex, direction){
						// console.log(index,nextIndex)
						// console.log(direction);
						if(direction === "down"){
							// console.log($(".all-show>a").eq(nextIndex-1).addClass("all-active").siblings())
							$(".all-show>a").eq(index).addClass("all-active").siblings().removeClass("all-active")
						}else{
							$(".all-show>a").eq(nextIndex-1).addClass("all-active").siblings().removeClass("all-active")
						}
						// console.log(index)
						// var isShow = true;
						if(index =  1){
							// isShow = true;
							video.play();
						}else{
							video.pause();
						}
					},
				});
			});
			
			var test1 = new Swiper('#character', {
				pagination: {
					el: '.main-four .swiper-pagination',
					clickable: true,
				},
				navigation: {
					nextEl: '.main-four .swiper-button-next',
					prevEl: '.main-four .swiper-button-prev',
					disabledClass: 'my-button-disabled',
				},
				observer:true,
				obsreverParents:true,
				observeSlideChildren:true,
			})
			
			var test2 = new Swiper('.skill-lb', {
				preventClicks: true,
				navigation: {
					nextEl: '.skill-lb .swiper-button-next',
					prevEl: '.skill-lb .swiper-button-prev',
				},
				observer:true,
				obsreverParents:true,
				observeSlideChildren:true,
			})
			
			test1.controller.control = test2;
			test2.controller.control = test1;
			
			setTimeout(function(){
				$('.skill').hide()
			},0)
			
			var test = new Swiper('.main-five-show', {
				autoplay: true,

				pagination: {
					el: '.main-five-show .swiper-pagination',
					clickable: true,
				},
			})

			var myswiper = new Swiper('.main-six-lb', {
				autoplay: true,
				loop: true,
				pagination: {
					el: '.main-six .swiper-pagination',
					clickable: true,
				},
				navigation: {
					nextEl: '.main-six .swiper-button-next',
					prevEl: '.main-six .swiper-button-prev',
				},
			})

			var myswiper = new Swiper('.main-seven-lb', {
				autoplay: true,
				loop: true,
				slidesPerView: 3,
				slidesPerGroup: 1,

				pagination: {
					el: '.main-seven .swiper-pagination',
					clickable: true,
				},
				navigation: {
					nextEl: '.main-seven .swiper-button-next',
					prevEl: '.main-seven .swiper-button-prev',
				},
			})

			$('.main-five-item').click(function() {
				var index = $(this).index()
				$(this).addClass('block').siblings().removeClass('block');
				$('.main-five-zx').eq(index).addClass('main-five-have').siblings().removeClass('main-five-have');
			})
		</script>
		
		
	</body>
</html>
